import React from "react";
import { Card, Form, Input, Button, Checkbox, message } from "antd";
import { setToken } from "../utils/auth";
import { useHistory } from "react-router-dom";
import { loginAPI } from "../service/login";
import { post } from "../utils/requiest";

function Login() {
  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  const onFinish = (values) => {
    // console.log(values);
    /*  message.success("登陆成功");
    push("/admin/categories");
    setToken("111"); */
    loginAPI({ userName: values.username, password: values.password }).then(
      (res) => {
        console.log(res);
        if (res.code === "success") {
          message.success("登陆成功");
          setToken(res.token);
          push("/admin/categories");
        } else {
          message.info(res.message);
        }
      }
    );
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
    message.error("出错了");
  };
  const { push } = useHistory();

  return (
    <Card title="登录" className="login_Form">
      <Form
        {...layout}
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: "请输入用户名！" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码！" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default Login;
